<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商务服务类型列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/icon.css}">
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.easyui.min.js}"></script>
	<script type="text/javascript">
	   $(function(){
	       $('#typelist').datagrid({  
      				title:'商务服务类型列表',  
      				iconCls:'icon-save',
                    queryParams:{
                        "parentid": null,
                        "type": 2
                    },
                    url:"/manager/type/findAll",
      				columns:[
                          [
                				{field:'id',title:'主键',width:100,align:'center'},  
                				{field:'name',title:'类型名称',width:100,align:'center'},
                                {field:'parentName',title:'父类型名称',width:100,align:'center',formatter:function (val,row){
                                      return val == null ?"顶级类型":val;
                                }}
                                
                  ]
                    ],
      				toolbar: "#tooldiv",  
      				singleSelect:true
			});



           //初始化修改窗口
           $('#dg').dialog({
               title: '类型修改',
               width: 300,
               height: 200,
               closed: true,
               cache: false,
               modal: true,
               iconCls: 'icon-save',
               buttons: [{
                   text:'提交',
                   iconCls:'icon-ok',
                   handler:function(){
                       var selectedRow = $("#typelist").datagrid('getSelected');
                       if($("#dg input.easyui-textbox:eq(0)").textbox("getValue").trim() !== ""){
                           $.ajax({
                               dataType: "json",
                               url: "/manager/type/modify",
                               data: {
                                   "name": $("#dg input.easyui-textbox:eq(0)").textbox("getValue"),
                                   "id": selectedRow.id,
                               },
                               success: function (result) {
                                   if (result.status == 200) {
                                       alert(result.msg);
                                       $("#typelist").datagrid('reload');
                                       $('#dg').dialog('close');
                                   }
                               },
                               error: function (xhr, status, error) {
                                   alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
                               }
                           });
                       }else{
                           alert("类型名称内容不能为空!")
                       }
                   }
               },{
                   text:'关闭',
                   handler:function(){
                       $('#dg').dialog("close");
                   }
               }]
           });

           //初始化修改窗口
           $('#ag').dialog({
               title: '类型添加',
               width: 300,
               height: 200,
               closed: true,
               cache: false,
               modal: true,
               iconCls: 'icon-save',
               buttons: [{
                   text:'提交',
                   iconCls:'icon-ok',
                   handler:function(){
                       var queryParams = $("#typelist").datagrid('options').queryParams;
                       if($("#ag input.easyui-textbox:eq(0)").textbox("getValue").trim() !== ""){
                           $.ajax({
                               dataType: "json",
                               url: "/manager/type/add",
                               data: {
                                   "name": $("#ag input.easyui-textbox:eq(0)").textbox("getValue"),
                                   "parentid": queryParams.parentid,
                                   "type": queryParams.type
                               },
                               success: function (result) {
                                   if (result.status == 200) {
                                       alert(result.msg);
                                       $("#typelist").datagrid('reload');
                                       $('#ag').dialog('close');
                                   }
                               },
                               error: function (xhr, status, error) {
                                   alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
                               }
                           });
                       }else{
                           alert("类型名称内容不能为空!")
                       }
                   }
               },{
                   text:'关闭',
                   handler:function(){
                       $('#ag').dialog("close");
                   }
               }]
           });
	   });

       function opendg(){
           var selectedRow = $("#typelist").datagrid('getSelected');
           if(selectedRow){
               $("#dg input.easyui-textbox:eq(0)").textbox("setValue",selectedRow.name);
               $('#dg').dialog("open");
           }else{
               alert("请选中列表中对应的信息!")
           }
       }

       function openag(){
           $("#ag input.easyui-textbox:eq(0)").textbox("setValue","");
           $('#ag').dialog("open");
       }

       var count_level = 1;
       var query_level = [];

       function nextLevel(){
           var selectedRow = $("#typelist").datagrid('getSelected');
           if(selectedRow){
               if(count_level >= 3){
                   alert("类型列表最多只有三级");
               }else{
                   var origin_queryParams = $("#typelist").datagrid('options').queryParams;
                   query_level.push(origin_queryParams.parentid);
                   var queryParams = {
                       "parentid": selectedRow.id,
                       "type": 2
                   };
                   $('#typelist').datagrid('options').queryParams = queryParams;
                   $('#typelist').datagrid('reload');
                   count_level += 1;
               }
           }else{
               alert("请选中列表中对应的信息!")
           }
       }

       function previousLevel(){
           var rows = $("#typelist").datagrid('getRows');
           var selectedRow = $("#typelist").datagrid('getSelected');
           var origin_queryParams = $("#typelist").datagrid('options').queryParams;
           if(origin_queryParams.parentid === null && (!selectedRow)){
               alert("请选中列表中对应的信息!")
               return;
           }
           if(rows.length > 0){
               if(selectedRow){
                   if(count_level === 1){
                       alert("该类型为顶级模块!");
                   }else{
                       var queryParams = {
                           "parentid": query_level[query_level.length - 1],
                           "type": 2
                       };
                       $('#typelist').datagrid('options').queryParams = queryParams;
                       $('#typelist').datagrid('reload');
                       count_level -= 1;
                       query_level.pop();
                   }
               }else{
                   alert("请选中列表中对应的信息!")
               }
           }else{
               var queryParams = {
                   "parentid": query_level[query_level.length - 1],
                   "type": 2
               };
               $('#typelist').datagrid('options').queryParams = queryParams;
               $('#typelist').datagrid('reload');
               count_level -= 1;
               query_level.pop();
           }

       }

       function deleteById(){
           var selectedRow = $("#typelist").datagrid('getSelected');
           if(selectedRow){
               var typeConfirmed = confirm("确认是否删除?");
               if (typeConfirmed) {
                   $.ajax({
                       dataType: "json",
                       url: "/manager/type/delete",
                       data: {"id":selectedRow.id,"type":2},
                       success: function (result) {
                           if(result.status == 200){
                               alert(result.msg)
                               $('#typelist').datagrid('reload');
                           }
                       },
                       error: function (xhr, status, error) {
                           alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
                       }
                   });
               }
           }else{
               alert("请选中列表中对应的信息!");
           }
       }
	</script>
</head>
<body>
  <div id="tooldiv">
      <a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteById()">删除</a>
      <a class="easyui-linkbutton" data-options="iconCls:'icon-add'"  onclick="openag();">添加</a>
      <a class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="opendg();">修改</a>
      <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="nextLevel()">下一级</a>
      <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="previousLevel()">上一级</a>
  </div>
  <table id="typelist"></table>
    <div id="dg">
        <div align="center" style="margin-top: 30px">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox"  style="width:80%" data-options="label:'类型名称:'"/>
            </div>
         </div>
   </div>
   <div id="ag">
      <div align="center" style="margin-top: 30px">
          <div style="margin-bottom:20px">
              <input class="easyui-textbox"  style="width:80%" data-options="label:'类型名称:'"/>
          </div>
      </div>
   </div>
</body>
</html>